import { STEP_STATUS_COLORS } from './types'

export function styles(className: string, props: { direction?: 'horizontal' | 'vertical' }) {
  const isHorizontal = props.direction !== 'vertical'

  return `
    .${className} {
      all: initial;
      display: flex;
      flex-direction: ${isHorizontal ? 'row' : 'column'};
      ${isHorizontal ? 'align-items: center;' : ''}
      width: 100%;
      padding: 8px 0;
    }

    .step-item {
      position: relative;
      display: flex;
      flex-direction: ${isHorizontal ? 'column' : 'row'};
      ${isHorizontal ? 'align-items: center;' : 'align-items: flex-start;'}
      flex: ${isHorizontal ? '1' : 'none'}; /* 平等分配空间 */
      ${isHorizontal ? 'min-width: 0;' : 'margin-bottom: 16px;'}
    }

    .step-item:not(:last-child)::after {
      content: '';
      position: absolute;
      ${isHorizontal
        ? `
        top: 12px;
        left: 50%;
        width: 100%;
        height: 2px;
      `
        : `
        left: 12px;
        top: 50%;
        height: 100%;
        width: 2px;
      `}
      background-color: #e4e7ed;
      z-index: 1;
    }

    .step-item.finish:not(:last-child)::after {
      background-color: ${STEP_STATUS_COLORS.finish};
    }

    .step-head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid ${STEP_STATUS_COLORS.wait};
      color: ${STEP_STATUS_COLORS.wait};
      font-size: 12px;
      z-index: 2;
      flex-shrink: 0;
      user-select: none !important;
      ${isHorizontal ? 'margin-bottom: 8px;' : 'margin-right: 12px;'}
    }

    .step-item.process .step-head {
      border-color: ${STEP_STATUS_COLORS.process};
      color: ${STEP_STATUS_COLORS.process};
    }

    .step-item.finish .step-head {
      border-color: ${STEP_STATUS_COLORS.finish};
      background-color: ${STEP_STATUS_COLORS.finish};
      color: white;
    }

    .step-item.error .step-head {
      border-color: ${STEP_STATUS_COLORS.error};
      background-color: ${STEP_STATUS_COLORS.error};
      color: white;
    }

    .step-item.warning .step-head {
      border-color: ${STEP_STATUS_COLORS.warning};
      background-color: ${STEP_STATUS_COLORS.warning};
      color: white;
    }

    .step-content {
      ${isHorizontal ? 'text-align: center;' : ''}
      min-width: 0;
    }

    .step-title {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .step-item.process .step-title {
      color: ${STEP_STATUS_COLORS.process};
      font-weight: 600;
    }

    .step-subtitle {
      font-size: 12px;
      color: #909399;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .step-item:hover {
      cursor: pointer;
    }

    .step-item:hover .step-title {
      /* color: ${STEP_STATUS_COLORS.process}; */
    }
  `
}
